<!-- eslint-disable vue/require-valid-default-prop -->
<script setup>
defineProps({
  listItem: { type: Object, default: {} },
  showType: { type: Boolean, default: false }
})
const emit = defineEmits(['click-tab'])
const onSubmit = (e) => {
  emit('click-tab', e)
}
</script>

<template>
  <div class="v-doctor">
    <div class="v-doctor-left">
      <img :src="listItem.doctorIcon || listItem.headimgurl" alt="" />
    </div>
    <div class="v-doctor-right">
      <p class="v-doctor-right-name">
        {{ listItem.doctorName || listItem.name
        }}<span>{{ listItem.staffTitle || listItem.nutritionistTitle }}</span>
      </p>
      <p class="v-doctor-right-institution">{{ listItem.institutionName }}</p>
      <p class="v-doctor-right-intro">
        {{
          listItem.expertiseIntro +
          listItem.expertiseIntro +
          listItem.expertiseIntro
        }}
      </p>
      <p class="v-doctor-right-description">
        咨询量<span>{{ listItem.serviceNum }}</span
        >患者评价<span>{{ listItem.evaluateNum }}</span>
      </p>
      <p class="v-doctor-right-skill">
        <span v-for="item in listItem.projects" :key="item.projectId">{{
          item.projectName
        }}</span>
      </p>
      <p class="v-doctor-right-bottom">
        <span class="v-doctor-right-bottom-score"
          >好评率<span
            ><van-icon name="star" size="0.85em" />{{
              listItem.recommend
            }}</span
          ></span
        >
        <span
          v-if="showType"
          class="v-doctor-right-bottom-btn"
          @click.stop="onSubmit(listItem)"
          >&yen;{{
            listItem.graphicPrice || listItem.visitedPrice
          }}咨询医生</span
        >
      </p>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.v-doctor {
  padding: 20px 13px;
  border-radius: 5px;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  position: relative;
  &:after {
    content: ' ';
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    right: 12px;
    bottom: 0;
    left: 12px;
    border-bottom: 1px solid #eee;
    transform: scaleY(0.5);
    z-index: 1;
  }
  .v-doctor-left {
    width: 50px;
    height: 50px;
    border: 1px solid #eeeeee;
    border-radius: 50% 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .v-doctor-right {
    width: 266px;
    .v-doctor-right-name {
      font-size: 15px;
      font-weight: 600;
      color: #212532;
      span {
        margin-left: 7px;
        padding: 3px;
        font-size: 12px;
        font-weight: 400;
        border-radius: 4px;
        color: #ee6a01;
        background: #ffecdd;
      }
    }
    .v-doctor-right-institution {
      font-size: 14px;
      color: #212532;
      line-height: 30px;
    }
    .v-doctor-right-intro {
      font-size: 14px;
      font-weight: 400;
      color: #555555;
      line-height: 20px;
    }
    .v-doctor-right-description {
      font-size: 14px;
      color: #848484;
      line-height: 24px;
      span {
        margin: 0 15px 0 7px;
        color: #357efe;
      }
    }
    .v-doctor-right-skill {
      line-height: 24px;
      span {
        margin-right: 6px;
        padding: 3px 4px;
        font-size: 12px;
        color: #848484;
        background: #f5f5f5;
        border-radius: 4px;
      }
    }
    .v-doctor-right-bottom {
      margin-top: 4px;
      display: flex;
      justify-content: space-between;
      .v-doctor-right-bottom-score {
        height: 30px;
        line-height: 30px;
        color: #848484;
        font-size: 14px;
        span {
          color: #f8a33f;
          font-weight: 600;
          font-size: 20px;
          margin-left: 6px;
          .van-icon {
            margin-right: 2px;
          }
        }
      }
      .v-doctor-right-bottom-btn {
        width: 121px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #357efe;
        background: #e9f6ff;
        border-radius: 15px;
      }
    }
  }
}
</style>
